var cpage = 0;
function shop_par_top20(p) {
    showTableAndEcharts();
    cpage = p;

    $.ajax({
        method: "POST",
        url: "shopParTop20ByPage",
        data: {
            page: p
        },
        success: function (data) {
            $("#tip").html("<h3>热门商品top20销量表格</h3>");
            $("#echart-tip").html("<h3>热门商品top20销量图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>商品ID</th><th>商品名</th><th>销量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            //重新加载表格的数据
            shop_par_top20_table(jsonArr);

            //加载图表
            shop_par_top20_echart();
        }
    })
}

function shop_par_top20_table(jsonArr) {
    $.each(jsonArr, function (index, shopParTop20) {
        if (index % 2 == 0) {
            $("tbody").append("<tr class='active'><td>"+shopParTop20.id+"</td><td>"+shopParTop20.sid+"</td><td>"
                +shopParTop20.sname+"</td><td>"+shopParTop20.count+"</td></tr>")
        } else {
            $("tbody").append("<tr class='info'><td>"+shopParTop20.id+"</td><td>"+shopParTop20.sid+"</td><td>"
                +shopParTop20.sname+"</td><td>"+shopParTop20.count+"</td></tr>")
        }
    });

    $("tbody tr").on("mouseenter", this, function() {
        color = $(this).attr("class");
        $(this).removeClass(color);
        $(this).addClass("success");
    });
    $("tbody tr").on("mouseleave", this, function() {
        $(this).removeClass("success");
        $(this).addClass(color);
    });

    //循环获取分页的页数
    var pages = 0;
    $.ajax({
        method: "POST",
        url: "getShopParTop20Pages",
        success: function (data) {
            pages = data;

            //添加分组组件
            var page = "<tr><td colspan='4'>";
            page += "<nav aria-label='Page navigation'>";
            page += "<ul class='pagination'>";
            page += "<li>";
            if (cpage > 1) {
                page += "<a href='javascript:shop_par_top20("+(cpage - 1)+")' aria-label='Previous'>";
            } else {
                page += "<a href='javascript:shop_par_top20(1)' aria-label='Previous'>"
            }
            page += "<span aria-hidden='true'>&laquo;</span>";
            page += "</a>";
            page += "</li>";

            //只显示10个分页
            for (var i = 1; i<=pages; i++) {
                if (cpage == i) {
                    page += "<li class='active'><a href='javascript:shop_par_top20("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                } else {
                    page += "<li><a href='javascript:shop_par_top20("+i+")'>"+i+"</a></li>"
                }
            }


            page += "<li>";

            if (cpage < pages) {
                page += "<a href='javascript:shop_par_top20("+(cpage+1)+")' aria-label='Next'>"
            } else {
                page += "<a href='javascript:shop_par_top20("+pages+")' aria-label='Next'>"
            }

            page += "<span aria-hidden='true'>&raquo;</span>";
            page += "</a>";
            page += "</li>";
            page += "</ul>";
            page += "</nav>";
            page += "</td></tr>";
            $("tbody").append(page);
            $("tbody tr:last-child td").css("text-align", "center")
        }
    });

}

function shop_par_top20_echart() {

    $.ajax({
        method: "POST",
        url: "shopParTop20",
        success: function (data) {

            var jsonArr = JSON.parse(data);
            $("#dataEcharts div:gt(0)").remove();
            $("#dataEcharts").append('<div id="main" style="height: 600px; width: 1000px"></div>');

            var x_data = [];
            var y_data = [];

            $.each(jsonArr, function (index, shopParTop20) {
                x_data.push(shopParTop20.sname);
                y_data.push(shopParTop20.count);
            });

            var myChart = echarts.init(document.getElementById('main'));

            var option = {
                dataZoom: [
                    {
                        type: 'inside'
                    },
                    {
                        type: 'slider'
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x_data,
                    name: "商品名"
                },
                yAxis: {
                    type: 'value',
                    name: "销量"
                },
                series: [
                    {
                        data: y_data,
                        type: 'bar'
                    }
                ]
            };

            myChart.setOption(option);

        }
    })

}